import { Tooltip } from 'antd';
import pageStyles from '@/common/pageLayout.less';
import { getColorTextLoadMap, tooltipLength } from '@/utils';

const getTableColumns = () => {
  return [
    {
      title: '编号',
      dataIndex: 'id',
      key: 'id',
      width: 230,
      visible: true,
      fixed: 'left',
      sorter: (a: any, b: any) => (a?.id > b?.id ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={text ? text : ''}>
            <span className={pageStyles['over-flow-hidden']}>
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: 200,
      visible: true,
      sorter: (a: any, b: any) => (a?.name > b?.name ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={text ? tooltipLength(text, 50) : ''}>
            <span className={pageStyles['over-flow-hidden']}>
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '业务类型',
      dataIndex: 'businessCategoryName',
      key: 'businessCategoryName',
      width: 130,
      visible: true,
      render: (text: string | null) => {
        const { color, colorText } = getColorTextLoadMap(text);
        return (
          <span
            className={pageStyles['over-flow-hidden']}
            style={{ color: color }}
          >
            {colorText ? colorText : '--'}
          </span>
        );
      },
    },
    {
      title: '是否默认',
      dataIndex: 'isDefault',
      key: 'isDefault',
      width: 100,
      visible: true,
      render: (text: string | null) => {
        let newText: string = '';
        let color: string = '';
        if (text == '1') {
          newText = '是';
          color = '#52c41a';
        }
        if (text == '0') {
          newText = '否';
          color = '#ff4d4f';
        }
        return (
          <span
            style={{
              color,
            }}
          >
            {newText ? newText : '--'}
          </span>
        );
      },
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      width: 180,
      visible: true,
      render: (text: string | null) => {
        return (
          <Tooltip title={text ? tooltipLength(text, 50) : ''}>
            <span className={pageStyles['over-flow-hidden']}>
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '状态',
      dataIndex: 'suspendState',
      key: 'suspendState',
      width: 100,
      visible: true,
      render: (text: string | null) => {
        let newText: string = '';
        let color: string = '';
        if (text == '1') {
          newText = '激活';
          color = '#52c41a';
        }
        if (text == '2') {
          newText = '挂起';
          color = '#ff4d4f';
        }
        return (
          <span
            style={{
              color,
            }}
          >
            {newText ? newText : '--'}
          </span>
        );
      },
    },
  ];
};

export { getTableColumns };
